<!-- 事件日志 -->
<template>
  <div>
    <div class="box">
      <div class="top" style="text-align: right; margin-bottom: 10px;">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
      <el-row>
        <el-col>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
            <el-table-column label="序号" width="60" type="index"
              :index='(index) => { return (index + 1) + (this.pageNum - 1) * this.pageSize }'> </el-table-column>
            <el-table-column label="部门" show-overflow-tooltip prop="Department" width="120px"></el-table-column>
            <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="160px"></el-table-column>
            <el-table-column label="使用者" show-overflow-tooltip prop="UserName" width="120px"></el-table-column>
            <el-table-column label="协议类型" show-overflow-tooltip prop="TransProtocol" width="120px"></el-table-column>
            <el-table-column label="开放端口" show-overflow-tooltip prop="Port" width="120px"></el-table-column>
            <el-table-column label="端口解释" show-overflow-tooltip prop="PortDesc"></el-table-column>
            <el-table-column label="进程信息" show-overflow-tooltip prop="ProcPath"></el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page=pageNum
            :page-size=pageSize background layout="total, prev, pager, sizes, next, jumper" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { parseTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.Moder = JSON.parse(sessionStorage.getItem('detailStatus'))
    this.pageSize = (Cookies.get('Zhuoguan_DefaultPageLength') || 10) * 1;

    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  methods: {
    parseTime,
    async getData() {
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          DeviceUUID: this.Moder.DeviceUUID,
        }
      }
      const res = await connrequest('GetOpenPortDetail', data)
      res.Data = res.Data || []
      this.tableData = res.Data
      this.total = res.Paging.TotalCount || 0
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getData()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getData()
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
</style>